<template>
	<view class="page-cont">
		
		<view class="container">
			<!-- <uni-card :is-shadow="false" is-full>
				<text class="uni-h6">文件选择上传组件</text>
			</uni-card> -->

			<uni-section title= "介绍(请下拉页面以查看后续内容)"
			type="line">

			
			
			
			<uni-section title= "作画并上传图片(然后下拉填写测试的prompt后点击底部的提交按钮)"
			type="line">
			</uni-section>
				<view class="example-body">
					<uni-file-picker 
					ref="files"
					limit="1" 
					@select="select" 
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					title="请选择一张图片" :source-type="sourceType"></uni-file-picker>
				</view>
		
			<uni-section title="待测prompt" type="line">
				<view class="example">
					
					<text>未标必填的都可以不填</text>
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="picInfoForm" :model="picInfos" labelWidth="80px" :label-position="alignment">
						
						<text>必填！</text>
						<uni-forms-item label="多模态大模型的prompt">
							<uni-easyinput type="textarea" v-model="multiModalPrompt" placeholder="请填写多模态大模型的prompt" maxlength="-1"/>
						</uni-forms-item>
						<text>必填！</text>
						<uni-forms-item label="文本大模型的prompt1">
							<uni-easyinput type="textarea" v-model="textPrompt1" placeholder="请填写文本大模型的的prompt1" maxlength="-1"/>
						</uni-forms-item>
						<text> 文本大模型对结果进行二次处理的prompt（对格式进行重组、优化）不填下边这个prompt则不会让文本大模型进行第二次处理</text>
						<uni-forms-item label="文本大模型的prompt2">
							<uni-easyinput type="textarea" v-model="textPrompt2" placeholder="请填写文本大模型的的prompt2" maxlength="-1"/>
						</uni-forms-item>
						
						
						
						<uni-forms-item label="画作名字">
							<uni-easyinput v-model="picInfos.img_name" placeholder="给作品取个名字吧!ヽ(｡･ω･｡)ﾉ" />
						</uni-forms-item>
						
						<uni-forms-item label="作画顺序">
							<uni-easyinput type="textarea" v-model="picInfos.sequence" placeholder="请填写您的作画顺序" />
						</uni-forms-item>
						
						<uni-forms-item label="您的年龄">
							<uni-easyinput v-model="picInfos.age" placeholder="请填写您本人的年龄" />
						</uni-forms-item>
						
						<uni-forms-item label="您的性别">
							<uni-easyinput v-model="picInfos.gender" placeholder="请填写您本人的性别" />
						</uni-forms-item>
						
						<uni-forms-item label="您的职业">
							<uni-easyinput v-model="picInfos.job" placeholder="请填写您本人的职业" />
						</uni-forms-item>
						
						<uni-forms-item label="作画时间(单位:分钟)">
							<uni-easyinput v-model="picInfos.time" placeholder="请填写作画时间(如未超时可不填)" />
						</uni-forms-item>
						
						<uni-forms-item label="详细描述画面内容">
							<uni-easyinput type="textarea" v-model="picInfos.content" placeholder="请详细描述一下画面的内容" maxlength="-1"/>
						</uni-forms-item>
						<uni-forms-item label="详细描述画面内容">
							<uni-easyinput type="textarea" v-model="picInfos.content" placeholder="请详细描述一下画面的内容" maxlength="-1"/>
						</uni-forms-item><uni-forms-item label="详细描述画面内容">
							<uni-easyinput type="textarea" v-model="picInfos.content" placeholder="请详细描述一下画面的内容" maxlength="-1"/>
						</uni-forms-item>
						
						
					</uni-forms>
				</view>
			</uni-section>
			<uni-section title="分析结果" type="line">
				<view class="result">
					<text>{{result}}</text>
				</view>
				
			</uni-section>
			</uni-section>
			
			
			<button v-if="canSubmit === 1" @click="analyse()" type = "primary">完成并提交</button>
			
			
				
			
			
		</view>
		
		
	</view>
	
	
</template>

<script>
	import {server_url} from '@/web_config/config.js'
	
	
	
	
	export default {
		data() {
			return {
				canSubmit:0,
				status:0,
				value:['0'],
				result:"结果会展示在这里(๑•̀ㅂ•́)و✧",
				multiModalPrompt:"",
				textPrompt1:"",
				textPrompt2:"",
				alignment: 'top',
				sourceType: ['album', 'camera'],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'green',
						style: 'dashed',
						radius: 2
					}
				},
				picInfos:{
					img_id:0,
					file_name:"",//后端给文件的随机命名，用来区分图片
					img_name:"",//用户起的名字
					sequence:"",//用户的作画顺序
					content:"",//用户对画作的内容的详细描述
					age:"",//用户的年龄
					gender:"",//用户的性别
					job:"",//用户的职业
					// description:"",
					
					time:""
				},
				INITIAL:0,
				IMG_UPLOADED:1,
				WAITING_RES:2,
				RES_SHOWED:3,
				
				
			}
		},
		onLoad() {
			console.log("load好")
			
			uni.request({
			    url: server_url + "/prompts", //仅为示例，并非真实接口地址。
			    data: {
					
			    },
				method:"GET",
			    header: {
			         //自定义请求头信息
			    },
			    success: (res) => {
			        console.log(res.data);
			        this.multiModalPrompt = res.data.multiModalPrompt;
					this.textPrompt1 = res.data.textPrompt1;
					this.textPrompt2 = res.data.textPrompt2;
					
			    }
			});
			
		},
		mounted() {
			console.log("加载好");
			
				
		},
		methods: {
			select(e){
				console.log('选择文件：',e)
				console.log("文件"+ e.tempFiles[0]);
				
				// 在图片上传成功前不显示提交
				this.canSubmit = 0;
				
				// this.result = "请等待一分钟左右,您的图片正在被最顶尖的人工智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
				uni.uploadFile({
							url: server_url + '/only/upload/image', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// console.log(data.id);
								// console.log(uploadFileRes.data);
								this.result = data.result;
								this.picInfos.file_name = data.filename
								this.canSubmit = 1;//
								// console.log("这里"+this.picInfos.img_id)
							}
						});
				
			},
			
			select_backup(e){
				console.log('选择文件：',e)
				console.log("文件"+ e.tempFiles[0]);
				this.result = "请等待一分钟左右,您的图片正在被最顶尖的人工智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
				uni.uploadFile({
							url: server_url + '/upload/image', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// console.log(data.id);
								// console.log(uploadFileRes.data);
								this.result = data.result;
								// console.log("这里"+this.picInfos.img_id)
							}
						});
				
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			change(e) {
				console.log(e);
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			
			uploadImages(){
				this.$refs.files.upload()
			},
			
			submit(ref) {
				console.log(this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			back(){
				uni.navigateBack();
			},
			
			analyse(){
				
				if (this.picInfos.file_name === "") {
					console.log("未上传图片")
					this.result = "请上传图片并填写信息后再点击此按钮提交";
					return;
				}
				this.result = "请等待一分钟左右,您的图片正在被最顶尖的智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
				
				
				uni.request({
				    url: server_url + "/test", //仅为示例，并非真实接口地址。
				    data: {
						'multiModalPrompt': this.multiModalPrompt,
						'textPrompt1': this.textPrompt1,
						'textPrompt2': this.textPrompt2,
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
				    },
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.result = res.data.result;
				    }
				});
				
			},
			complete(){
				this.updatePicInfo();
				this.back();
			}
		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		padding: 15px;
	}
	
	.text2 {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>
